<template>
    <div class="page">
      <div class="kuai1"></div>
      <div class="kuai2"></div>
      <div class="text1">双线质量管控体</div>
      <div class="text2">力求每件产品</div>
      <div class="dian">、</div>
      <div class="text3">每个细节都尽善尽美</div>
      <div class="text4">够专业</div>
      <div class="text5">才放心</div>
      <div class="bottom">
        All Rights Reserved ©2021 版权所有 ｜ 粤ICP备18069755号
      </div>
      <div class="LR1">ORDER聚造</div>
      <div class="LR2">ORDER聚造</div>

        <div class="index">
          <div class="box">
            <div class="first">欢迎使用</div>
            <div class="second">系统登录</div>
            <el-form :model="ruleForm" :hide-required-asterisk="true" :rules="rules" ref="ruleForm" label-width="60px" class="inputBox">
              <div class="input">
                <el-form-item label="用户名" prop="userName" style="text-align: justify; text-align-last: justify;">
                  <el-input autosize v-model="ruleForm.userName">
                    <img slot="prefix" class="inputIcon" src="../image/user.png"/>
                  </el-input>
                </el-form-item>
              </div>
              <div class="input">
                <el-form-item label="密码" prop="passWord" style="text-align: justify; text-align-last: justify;">
                  <el-input autosize type="password" v-model="ruleForm.passWord">
                    <img slot="prefix" class="inputIcon" src="../image/password.png"/>
                  </el-input>
                </el-form-item>
              </div>
            </el-form>
          </div>
          <div class="button" @click="submitForm">登录</div>
        </div>
    </div>
</template>

<script>
///密码安全
import md5 from "js-md5";
// import axios from 'axios'
// console.log(axios)

export default {
  name: "login",
  components: {},
  data() {
    return {
      ruleForm: {
        userName: "",
        passWord: "",
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        passWord: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$http({
            url: "/login",
            method: "POST",
            data: {
              userName: this.ruleForm.userName,
              passWord: md5(this.ruleForm.passWord),
              platform: "Web",
            },
          }).then((res) => {
            if (!res.errorMsg) {
              ///Storage只能存储对象，不能存储字符串
              localStorage.setItem("token", res.token);
              localStorage.setItem("user", JSON.stringify(res));
              this.$router.push('/index')
            }
          });
        }
      });
    },
  },
  created() {},
  mounted() {},
};
</script>

<style>
body {
  background: url(https://wx1.sinaimg.cn/mw690/007bpGQEgy1h175joz43bj311y0lc414.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.page {
  width: 100%;
  height: 100%;
}

.kuai1 {
  width: 120px;
  height: 180px;
  background: #e1f2f9;
  opacity: 0.3;
  position: absolute;
  top: 200px;
  left: 90px;
}
.kuai2 {
  width: 135px;
  height: 180px;
  background: #e1f2f9;
  opacity: 0.3;
  position: absolute;
  top: 380px;
  left: 166px;
}
.text1 {
  width: 24px;
  height: 133px;
  font-size: 18px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: bold;
  color: #fefefe;
  position: absolute;
  top: 205px;
  left: 130px;
}
.text2 {
  width: 21px;
  height: 100px;
  font-size: 17px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: bold;
  color: #ffffff;
  position: absolute;
  top: 200px;
  left: 180px;
}
.dian {
  width: 21px;
  height: 20px;
  font-size: 17px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: bold;
  color: #ffffff;
  position: absolute;
  text-align: center;
  top: 330px;
  left: 190px;
}
.text3 {
  width: 21px;
  height: 156px;
  font-size: 17px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: bold;
  color: #ffffff;
  position: absolute;
  top: 355px;
  left: 180px;
}
.text4 {
  width: 37px;
  height: 90px;
  font-size: 30px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: bold;
  color: #6bb9da;
  position: absolute;
  top: 250px;
  left: 230px;
}
.text5 {
  width: 37px;
  height: 90px;
  font-size: 30px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: bold;
  color: #6bb9da;
  position: absolute;
  top: 390px;
  left: 230px;
}
.bottom {
  width: 428px;
  height: 17px;
  font-size: 14px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: normal;
  color: #565656;
  position: absolute;
  bottom: 35px;
  left: 470px;
}
.LR1 {
  width: 211px;
  height: 48px;
  font-size: 38px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: normal;
  color: #d7e8fa;
  position: absolute;
  bottom: 26px;
  right: 50px;
}
.LR2 {
  width: 118px;
  height: 26px;
  font-size: 21px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: normal;
  color: #409eff;
  position: absolute;
  bottom: 22px;
  right: 137px;
}

.index {
  width: 378px;
  height: 378px;
  background: #efeff0;
  border-radius: 20px 20px 20px 20px;
  opacity: 0.9;
  position: absolute;
  top: 25%;
  right: 12.5%;
}
.box {
  margin-left: 30px;
  margin-top: 23px;
}
.first {
  width: 52px;
  height: 16px;
  font-size: 13px;
  color: #96a3b0;
}
.second {
  margin-top: 6px;
  font-size: 27px;
  font-weight: bold;
  color: #4e4e4e;
}
.inputBox {
  margin-top: 55px;
}
.input {
  width: 320px;
  height: 39px;
  margin-top: 28px;
  background: #f1f1f1;
  border-radius: 5px 5px 5px 5px;
  opacity: 1;
}
.inputIcon {
  width: 15px;
  height: 15px;
  margin-top: 12px;
  margin-left: 4px;
}
.button {
  width: 318px;
  height: 40px;
  background-color: #409eff;
  font-size: 17px;
  line-height: 40px;
  text-align: center;
  margin: 0px auto;
  border-radius: 20px;
  color: #f4f4f5;
  margin-top: 53px;
}
.button:hover {
  opacity: 0.8;
  cursor: pointer;
}
.active {
  border: 2px solid #ff0000;
}
</style>